import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';

const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};

const PasswordLogon: React.FC = () => (

    <Form
        name="basic"
        // labelCol={{ span: 8 }}
        // wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        size="small"
    >
        <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
            style={{ width: "100%" }}
        >
            <Input />
        </Form.Item>

        <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
        >
            <Input.Password />
        </Form.Item>

        <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
        >
            <Checkbox>Remember me</Checkbox>
            <Button type='text' style={{ marginLeft: "auto" }}>忘记密码?</Button>
        </Form.Item>



        <Form.Item>
            <Button type="primary" htmlType="submit" style={{ flex: 1, width: "100%" }}>
                登录
            </Button>
        </Form.Item>

    </Form>

);


export default PasswordLogon;
